<template>
	<div class="right">
		<Title analysisTitle="充电时段分析"></Title>
		<div class="echarts bgItem">
			<Scatter height="13.625rem" :chartData="Scatterdata"></Scatter>
		</div>

		<Title analysisTitle="常用充电站分析"></Title>

		<div class="echarts6 bgItem">
			<div class="charge_table">
				<div class="table_header">
					<div class="item1 item">TOP</div>
					<div class="item2 item">充电站</div>
					<div class="item3 item">充电次数</div>
					<div class="item4 item">充电量(度)</div>
					<div class="item5 item">充电时长(分钟)</div>
				</div>
				<div class="table_con" v-for="(item, index) in echarts6data">
					<div class="item1 item">{{ index + 1 }}</div>
					<div class="item2 item">{{ item.chargingStation }}</div>
					<div class="item3 item">{{ item.chargingTimes }}</div>
					<div class="item4 item">{{ item.electric }}</div>
					<div class="item5 item">{{ item.chargingTime }}</div>
				</div>
			</div>
			<div class="paging">
				<img @click="handleStatePre()" class="left" src="/src/assets/images/userAnalysisDetails/u374.png" />
				<div class="pag_tio">{{ stateCurrent }}</div>
				<img @click="handleStateNext()" class="right" src="/src/assets/images/userAnalysisDetails/u374.png" />
			</div>

			<!-- 常用充电站位置分布 -->
			<div class="state">常用充电站位置分布</div>

			<div class="state_map">
				<GaoDe :chartData="echarts6data"></GaoDe>
			</div>
			<div class="state" style="margin-bottom: 2rem">常用充电桩功率统计</div>
			<div class="charge_num">
				<BarRank :chartData="chargeRankData" :barLed="barLed" height="260px" />
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
	import {ref, reactive, computed, unref} from 'vue';
	import Title from './Title.vue';
	import Scatter from './chart/Scatter.vue';
	import BarRank from '../../OverviewAnalysis/components/chart/BarRank.vue';
	import GaoDe from './chart/Gaode.vue';
	import {getchargingPeriodAnalysis, getchargingStationAnalysis, getchargingStakeAnalysis} from '@/api/screen/UserAnalysisdetails.js';
	const props = defineProps({
		vinData: {
			type: String,
		},
	});

	const echarts6data = ref([
		{
			index: '1',
			name: '海南儋州市怡心花园',
			address: '5',
		},
		{
			index: '2',
			name: '海南儋州市怡心花园',
			address: '5',
		},
		{
			index: '3',
			name: '海南儋州市怡心花园',
			address: '5',
		},
		{
			index: '4',
			name: '海南儋州市怡心花园',
			address: '5',
		},
		{
			index: '5',
			name: '海南儋州市怡心花园',
			address: '5',
		},
	]);
	const Scatterdata = ref([]);
	const paramsdata = ref({
		vin: props.vinData,
	});
	const chargeRankData = ref([
		{name: '<10', value: 9},
		{name: '10-30', value: 7},
		{name: '30-60', value: 13},
		{name: '60-100', value: 20},
		{name: '100-200', value: 24},
		{name: '>200', value: 4},
	]);
	onMounted(() => {
		// 充电时段分析
		getchargingPeriodAnalysis(paramsdata.value).then((res) => {
			console.log('getchargingPeriodAnalysis', res);
			Scatterdata.value = res;
		});
		getchargingStationAnalysisApi(paramsdata.value);
		// 常用充电桩功率统计
		getchargingStakeAnalysis(paramsdata.value).then((res) => {
			console.log('getchargingStakeAnalysis', res);
			chargeRankData.value = res.map((item) => {
				return {name: item.ratedPowerGroup, value: item.chargingTimes};
			});
		});
	});
	function getchargingStationAnalysisApi(params) {
		// 常用充电站分析
		getchargingStationAnalysis(params).then((res) => {
			console.log('getchargingStationAnalysis', res);
			echarts6data.value = res;
		});
	}

	let stateCurrent = ref(1);
	const handleStatePre = (value) => {
		// 上一页
		if (stateCurrent.value > 1) {
			stateCurrent.value--;
			// getchargingStationAnalysisApi({...params, page: stateCurrent.value - 1})
		}
	};
	const handleStateNext = (value) => {
		// 下一页
		stateCurrent.value++;
	};

	const barLed = {
		xLine: '#6d6d6d',
		label: '#7d8590',
		lineColorBegin: '#188efc',
		lineColorEnd: '#0e2543',
		xUnit: '额定功率\n（千瓦）',
		yUnit: '充电次数',
		dataLabel: false,
	};
</script>

<style lang="less" scoped>
	.right {
		width: 100%;

		.echarts {
			height: 13.625rem;

			background-color: rgba(12, 24, 45, 1);
			margin-bottom: 1.25rem;
		}

		.echarts6 {
			height: 55rem;

			background-color: rgba(12, 24, 45, 1);
			margin-bottom: 1.25rem;

			.charge_table {
				padding-top: 1rem;
				min-height: 15rem;

				.table_header {
					display: flex;
					margin: 0 0.75rem 0 0.75rem;

					.item {
						font-size: 0.75rem;
						color: #7d8590;
						text-align: center;
						line-height: 2rem;
						border-right: solid 1px #475a7e;
						border-bottom: solid 1px #475a7e;
						border-top: solid 1px #475a7e;
					}

					.item1 {
						width: 2.5rem;
						border-left: solid 1px #475a7e;
					}

					.item2 {
						width: 9.375rem;
					}

					.item3 {
						width: 5rem;
					}

					.item4 {
						width: 5rem;
					}

					.item5 {
						width: 5.5rem;
					}
				}

				.table_con {
					display: flex;
					margin: 0 0.75rem 0 0.75rem;

					.item {
						font-size: 0.75rem;
						color: #fff;
						text-align: center;
						line-height: 2rem;
						border-right: solid 1px #475a7e;
						border-bottom: solid 1px #475a7e;
					}

					.item1 {
						width: 2.5rem;
						border-left: solid 1px #475a7e;
					}

					.item2 {
						width: 9.375rem;
					}

					.item3 {
						width: 5rem;
					}

					.item4 {
						width: 5rem;
					}

					.item5 {
						width: 5.5rem;
					}
				}
			}

			.paging {
				height: 1.875rem;
				display: flex;
				justify-content: center;
				align-items: center;

				.left {
					cursor: pointer;
					width: 0.625rem;
					height: 0.625rem;
					transform: rotate(-90deg);
				}

				.right {
					cursor: pointer;
					width: 0.625rem;
					height: 0.625rem;
					transform: rotate(90deg);
				}

				.left:hover {
					opacity: 0.4;
				}

				.right:hover {
					opacity: 0.5;
				}

				.pag_tio {
					width: 0.625rem;
					height: 0.625rem;
					border-radius: 50%;
					background: #1890ff;
					margin: 0 0.5rem;
					color: #fff;
					font-size: 0.5rem;
					text-align: center;
					line-height: 0.625rem;
				}
			}

			.state {
				font-size: 0.75rem;
				color: #7d8590;
				text-align: center;
				margin-bottom: 1.25rem;
			}

			.state_map {
				margin-left: 0.75rem;
				width: calc(100% - 1.5rem);
				height: 16.875rem;
				margin-bottom: 1.25rem;
			}

			.charge_num {
				padding-left: 1.25rem;
			}
		}
	}

	.bgItem {
		background-image: linear-gradient(transparent 10px, #0c182d 10px, #0c182d calc(100% - 10px), transparent calc(100% - 10px), transparent 100%), linear-gradient(90deg, transparent 10px, #0c182d 10px, #0c182d calc(100% - 10px), transparent calc(100% - 10px), transparent 100%), linear-gradient(#6f9bdd 1px, transparent 1px, transparent calc(100% - 1px), #6f9bdd calc(100% - 1px), #6f9bdd 100%), linear-gradient(90deg, #6f9bdd 1px, transparent 1px, transparent calc(100% - 1px), #6f9bdd calc(100% - 1px), #6f9bdd 100%);
		background-repeat: no-repeat;
		background-position:
			top left,
			top left,
			bottom right,
			bottom right;
		background-size:
			100% 100%,
			100% 100%;
	}
</style>
